<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>我的订单</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <style type="text/css">
    	/*滑动区域*/
		.slider{
			margin-top: 10px;
		}
		.slider .mui-media-body{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.slider ul li>div{
		    position: relative;
		    display: block;
		    overflow: hidden;
			margin: 0 -15px;
		    padding: inherit;
		    white-space: nowrap;
		    text-overflow: ellipsis;
		    color: inherit;
		}
		.slider ul li>div span{
			color: #e53e30;
		}
		.slider .mui-btn{
			background: #65d4a3;
			border: none;	
		    color: #fff;
		}
		.slider .mui-btn:enabled:active{
			background: #65d4a3;
		}
		.slider ul li img{
			margin-top: 20px;
		}
    </style>
</head>
<body>
	
	<header class="mui-bar mui-bar-nav">
		<a href="javascript:history.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">我的订单</h1>
	</header>
	
	
	<div class="mui-content">
	    <!--选项卡-->
		<div class="mui-segmented-control control">
		    <a class="mui-control-item mui-active" href="#">我买入的</a>
		    <a class="mui-control-item" href="#">我挂买的</a>
		    <a class="mui-control-item" href="#">我求购的</a>
		    <a class="mui-control-item" href="#">我应购的</a>
		</div>
		
		<div class="mui-slider slider">
			<div class="mui-slider-group">
				<!--第一个内容区容器-->
				<div class="mui-slider-item">
					
					<!-- 我买入的 -->
					<ul class="mui-table-view">
					    <li class="mui-table-view-cell mui-media">
					        <div>
					            <img class="mui-media-object mui-pull-left" src="img/bank.png">
					            <div class="mui-media-body">
					            	<div>
					                	单号：1548196747<br/>
					                	数量：<span>100.00</span><br/>
					                	用户名：12345678910<br/>
					                	手机号：12345678910
					            	</div>
					            </div>
					        </div>
					    </li>
					    <li class="mui-table-view-cell mui-media">
					        <div>
					            <img class="mui-media-object mui-pull-left" src="img/bank.png">
					            <div class="mui-media-body">
					            	<div>
					                	单号：1548196747<br/>
					                	数量：<span>100.00</span><br/>
					                	用户名：12345678910<br/>
					                	手机号：12345678910
					            	</div>
					            </div>
					        </div>
					    </li>
					    <li class="mui-table-view-cell mui-media">
					        <div>
					            <img class="mui-media-object mui-pull-left" src="img/bank.png">
					            <div class="mui-media-body">
					            	<div>
					                	单号：1548196747<br/>
					                	数量：<span>100.00</span><br/>
					                	用户名：12345678910<br/>
					                	手机号：12345678910
					            	</div>
					            </div>
					        </div>
					    </li>
					</ul>
				</div>
				<!--第二个内容区-->
				<div class="mui-slider-item">
					<!-- 我挂买的 -->
					<ul class="mui-table-view purchase">
					    <li class="mui-table-view-cell mui-media">
					        <div>
					            <img class="mui-media-object mui-pull-left" src="img/bank.png">
					            <div class="mui-media-body">
					            	<div>
					                	单号：1548196747<br/>
					                	数量：<span>100.00</span><br/>
					                	用户名：12345678910<br/>
					                	手机号：12345678910
					            	</div>
					                <button class="mui-btn" data-data='1'>确认</button>
					            </div>
					        </div>
					    </li>
					    <li class="mui-table-view-cell mui-media">
					        <div>
					            <img class="mui-media-object mui-pull-left" src="img/bank.png">
					            <div class="mui-media-body">
					            	<div>
					                	单号：1548196747<br/>
					                	数量：<span>100.00</span><br/>
					                	用户名：12345678910<br/>
					                	手机号：12345678910
					            	</div>
					                <button class="mui-btn" data-data='1'>确认</button>
					            </div>
					        </div>
					    </li>
					</ul>
				</div>
				<!--第三个内容区-->
				<div class="mui-slider-item">
					
					<!-- 我求购的 -->
					<ul class="mui-table-view">
					    <li class="mui-table-view-cell mui-media">
					        <div>
					            <img class="mui-media-object mui-pull-left" src="img/bank.png">
					            <div class="mui-media-body">
					            	<div>
					                	单号：1548196747<br/>
					                	数量：<span>100.00</span><br/>
					                	用户名：12345678910<br/>
					                	手机号：12345678910
					            	</div>
					            </div>
					        </div>
					    </li>
					    <li class="mui-table-view-cell mui-media">
					        <div>
					            <img class="mui-media-object mui-pull-left" src="img/bank.png">
					            <div class="mui-media-body">
					            	<div>
					                	单号：1548196747<br/>
					                	数量：<span>100.00</span><br/>
					                	用户名：12345678910<br/>
					                	手机号：12345678910
					            	</div>
					            </div>
					        </div>
					    </li>
					    <li class="mui-table-view-cell mui-media">
					        <div>
					            <img class="mui-media-object mui-pull-left" src="img/bank.png">
					            <div class="mui-media-body">
					            	<div>
					                	单号：1548196747<br/>
					                	数量：<span>100.00</span><br/>
					                	用户名：12345678910<br/>
					                	手机号：12345678910
					            	</div>
					            </div>
					        </div>
					    </li>
					</ul>
				</div>
				<!--第四个内容区-->
				<div class="mui-slider-item">
					
					<!-- 我应购的 -->
					<ul class="mui-table-view">
					    <li class="mui-table-view-cell mui-media">
					        <div>
					            <img class="mui-media-object mui-pull-left" src="img/bank.png">
					            <div class="mui-media-body">
					            	<div>
					                	单号：1548196747<br/>
					                	数量：<span>100.00</span><br/>
					                	用户名：12345678910<br/>
					                	手机号：12345678910
					            	</div>
					                <button class="mui-btn" data-data='2'>确认</button>
					            </div>
					        </div>
					    </li>
					    <li class="mui-table-view-cell mui-media">
					        <div>
					            <img class="mui-media-object mui-pull-left" src="img/bank.png">
					            <div class="mui-media-body">
					            	<div>
					                	单号：1548196747<br/>
					                	数量：<span>100.00</span><br/>
					                	用户名：12345678910<br/>
					                	手机号：12345678910
					            	</div>
					                <button class="mui-btn" data-data='2'>确认</button>
					            </div>
					        </div>
					    </li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	
    
    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	mui.init()
    	
		/*****	 点击切换页面	******/
		mui('.mui-segmented-control').on('tap','.mui-control-item',e=>{
			mui('.mui-slider').slider().gotoItem($(e.target).index())
		})
		/******	   监听slider	********/
		$('.mui-slider').on('slide',e=>{
			$('.mui-segmented-control .mui-control-item').removeClass('mui-active')
			$('.mui-segmented-control .mui-control-item').eq(e.detail.slideNumber).addClass('mui-active')
		})
		/******		点击事件		********/
		$('.slider ul button').click(e=>{
			let _this = $(e.target)
			console.log(_this.data('data'))
			mui.confirm('您确定收到钱了吗?',e=>{
				if(e.index){
					$.ajax({
						type:"get",
						url:"",
						async:true,
						success(data){
							data = true			//假设确定成功
							if(data){
								_this.remove()
								mui.toast('确认成功')
							}else{
								mui.toast('服务器繁忙，请稍后重试')
							}
						},
						error(err){
							mui.toast('服务器繁忙，请稍后重试')
						}
					});
				}
			})
		})
    </script>
</body>
</html>
